<!--首页/消息/系统公告-->
<template>
    <div class="bigdiv">
        <el-row>
            <el-col>
                <el-table
                        :data="pageDataFun"
                        style="width: 100%"
                        :header-cell-style="this.$store.state.msgheaderCssObj">
                    <el-table-column
                            prop="message"
                            label="标题">
                    </el-table-column>
                    <el-table-column
                            prop="date"
                            label="时间"
                            width="220">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div style="text-align: center;width: 100%;margin-top: 20px">
                    <paging :obj = 'pagingData'></paging>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import paging from '../../components/public/paging'
    export default {
        name: "SystemNotice",
        components:{paging},
        data() {
            return {
                tableData: [
                    {id:1, message: '关于在线支付服务的重要通知',date: '2020-05-03 12:12:12'},
                    {id:2, message: '关于在线支付服务的重要通知',date: '2020-05-03 12:12:12'},
                    {id:3, message: '关于在线支付服务的重要通知',date: '2020-05-03 12:12:12'},
                    {id:4, message: '关于在线支付服务的重要通知',date: '2020-05-03 12:12:12'},
                    {id:5, message: '关于在线支付服务的重要通知',date: '2020-05-03 12:12:12'},
                    {id:6, message: '关于在线支付服务的重要通知',date: '2020-05-03 12:12:12'},
                    {id:7, message: '关于在线支付服务的重要通知',date: '2020-05-03 12:12:12'},
                    {id:8, message: '关于在线支付服务的重要通知',date: '2020-05-03 12:12:12'},
                    {id:9, message: '关于在线支付服务的重要通知',date: '2020-05-03 12:12:12'},
                    {id:10, message: '关于在线支付服务的重要通知',date: '2020-05-03 12:12:12'},
                    {id:11, message: '关于在线支付服务的重要通知',date: '2020-05-03 12:12:12'},
                    {id:12, message: '关于在线支付服务的重要通知',date: '2020-05-03 12:12:12'},
                    {id:13, message: '关于在线支付服务的重要通知',date: '2020-05-03 12:12:12'},
                ],
                //页面数据
                pageData:[],
            }
        },
        created(){
            this.pageData = this.tableData.slice(0,5)//第一页数据
        },
        computed:{
            pageDataFun(){
                return this.pageData
            },
            pagingData(){
                var that = this;
                let data = {
                    pageSize:5,//一页展示几条数据
                    pagerCount:5,//超过多少页打点省略
                    currentChange(num){
                        that.currentPage = num//改变当前页
                        let startNum = Number(num-1)*5 //开始
                        let endNum = num*5 //结束
                        this.pageData = this.tableData.slice(startNum,endNum)
                    },
                    pageCount:Math.ceil(that.tableData.length/5),//一共多少页
                }
                return data
            }
        },
    }
</script>

<style scoped>
.bigdiv{
    padding-top: 20px;
}
</style>